<template>
  <el-row>
    <el-col :span="12">
      <ms-skeleton avatar active :paragraph="1" :is-loading="loading">
        <el-row class="info-left">
          <div class="home-avatar">
            <img :src="avatarImg" />
          </div>
          <div class="login-info">
            <div class="name">{{ note }}</div>
            <div class="role">{{ $store.getters['user/userInfo'].depName }} | {{ $store.getters['user/userInfo'].roleName }}</div>
            <div class="time">{{ updateTime }}</div>
          </div>
        </el-row>
      </ms-skeleton>
    </el-col>
    <el-col :span="12">
      <el-row>
        <el-col :span="12" :offset="12">
          <task-info :loading="loading" />
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import TaskInfo from './Task'
import MsSkeleton from '@/common/skeleton/components'
import { mapGetters } from 'vuex'
export default {
  props: ['loading'],
  components: {
    TaskInfo,
    MsSkeleton
  },
  computed: {
    ...mapGetters('user', ['updateTime', 'avatarImg', 'realName']),
    time() {
      const date = new Date()
      const hour = date.getHours()
      return hour < 6 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 18 ? '下午好' : '晚上好')))
    },
    note() {
      let welcomeArr = [
        '喝杯咖啡休息下吧☕',
        '要不要和朋友打局LOL',
        '要不要和朋友打局王者荣耀',
        '几天没见又更好看了呢😍',
        '今天又写了几个Bug🐞呢',
        '今天在群里吹水了吗',
        '今天吃了什么好吃的呢',
        '今天您微笑了吗😊',
        '今天帮助别人解决问题了吗',
        '准备吃些什么呢',
        '周末要不要去看电影？'
      ]
      let index = Math.floor((Math.random() * welcomeArr.length))
      return `${this.time}，${this.realName}，${welcomeArr[index]}`
    }
  }
}
</script>

<style lang="stylus" scoped>
  .info-left
    display flex
    img
      width 5rem
      height 5rem
      border-radius 2px
    .home-avatar
      margin-right 2rem
    .login-info
      display flex
      flex-direction column
      justify-content space-between
      flex 1
      margin .5rem 0
      .name
        font-size 1.05rem
        margin-bottom 0.1rem
      .role, .time
        color rgba(0, 0, 0, .45)
        font-size .8rem
</style>
